<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>录入自定义页面</title>
		<!-- 引入 css -->
		<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
		<!-- 引入 js -->
		<script src="/admin/plugin/wangEditor/index.js"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<!--    引入Layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>
		<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">
		<link rel="stylesheet" href="/admin/html/module/sichuangwuye/hesuan/printbaobiao.css" media="all">

	</head>
	<body >
		<!-- <div class="topicon">
			<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i
					class="layui-icon layui-icon-print"></i></div>
		</div> -->
		<div id="app" >
			<div class="topicon">
				<div class="layui-inline" title="打印" @click="printHtml" ><i class="layui-icon layui-icon-print"></i></div>
			</div>

			<div id="printMy" style="width: 26.1cm;height: 9.4cm;color: #000000"  >
				<div class="demoTable" style="padding: 5px;">
					<table id="tablebox_table">
						<div class="tableboxs">

							<div class="zuofei" style="top: -24px;left: 17px;" v-if="isshowgz">
								<img src="/admin/html/module/sichuangwuye/img/gongzhang.png" alt="" width="200px">
							</div>

							<!-- 作废章 -->
							<div class="zuofei" v-if="formData.mapmine.iszf">
								<img src="/admin/js-css/img/skin_/zuofei.png" alt="">
							</div>
							<table border='1' class='tablebox'>
								<caption class="titletop">{{formData.mapmine.sjtitle}}</caption>
								<caption class="spans">
									<span class="maincol" v-if="formData.mapmine.pjh!='' ">NO.{{formData.mapmine.pjh}}</span>
									<span class="maincol" v-else >NO.{{formData.mapmine.jkbh}}</span>
								</caption>
								<caption class="spans">
									<div>
										<span>地址：{{formData.mapfj.xqmc}} {{formData.mapfj.ldmc}} {{formData.mapfj.dymc}} {{formData.mapfj.name}} {{formData.mapzh.name}}</span>
										<span>面积：{{formData.mapfj.jzmj}}</span>
										<span>日期：{{formData.mapmine.sj}}</span>
									</div>
								</caption>
								<tr>
									<th>项目</th>
									<th>{{colName}}</th>
									<th>单价</th>
									<th>数量</th>
									<th>金额</th>
									<th style="width: 180px;">备注</th>
								</tr>
								<tr v-for="(item,index) in formData.listmx">
									<td>{{item.sfxm}}</td>
									<td>{{item.jkqj}}</td>
									<td>{{item.dj}}</td>
									<td>{{item.sl}}</td>
									<td>{{item.fee}}</td>
									<td>{{item.bz}}</td>
								</tr>
								<tr v-for="(item,index) in formData.forcs">
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<th>实收合计(人民币)</th>
									<th colspan="3" style="text-align: left;">大写：{{formData.mapmine.sumfee_chine}}</th>
									<th>￥：{{formData.mapmine.sumfee}}</th>
									<th >{{formData.fkfs}}</th>
								</tr>
							</table>
						</div>

						<div class="posbottom">
							<div>
								<span>开票人：{{formData.mapmine.czr}}</span>
								<span>收款日期：{{formData.mapmine.sj}}</span>
								<span>业主签字：</span>
								<span>公司盖章：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							</div>
						</div>
					</table>
				</div>
			</div>


		</div>


		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					parmsData:{},
					formData:{},
					colName:"缴费期间",
					isshowgz:false,//是否显示公章
				},
				created(){
					this.parmsData = getParams();
					this.getData();
				},
				methods: {
					printHtml(){
						$("#printMy").print();
					},
					async getData(){
						let tableId = getTableId("704");
						if(tableId.indexOf("jincheng1") != -1){
							this.colName = "供暖期间";
						}
						if(tableId.indexOf("xingye") != -1){
							this.isshowgz = true;
						}
						const res = await postWebCustom(tableId,{jkbh:this.parmsData.id});
						if(res.code == 0){
							top.alert(res.msg);
							return;
						}
						if(res.msg == "1"){
							if(res.data.pdfUrl!=""){
								window.location.href = res.data.pdfUrl;
							}else {
								top.alert(res.data.statusMsg+","+res.data.failCause);
							}
						}
						if(res.msg == "2"){
							this.formData = res.data;
						}

					}
				},

			})
		</script>
	</body>
</html>
